<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="root">
  <input type="text" v-model="bookName">
  <p v-book="bookName"></p>
</div>
</body>
<script>
  new Vue({
    el: "#root",
    data:{
      bookName:"斗破苍穹"
    },
    directives:{
      // book(el,binds){
      // 	el.innerText = "《"+binds.value+"》";
      // }

      book:{
        // bind是一个钩子函数，只会挂载一次，当数据发生变化，视图会更新，但不会对指令重新解析。
        bind(el,binds){
          el.innerText = "《"+binds.value+"》";
        }
      }
    }
  })
</script>